<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		canvas{
			border: 1px solid #333;
		/*	width: 600px;
			height: 400px;*/
		}
	</style>
</head>
<body>
	<canvas width="600" height="400" id="canvas"></canvas>
	<script type="text/javascript">
		//相当于拿到一张纸
		var canvas=document.getElementById("canvas");

		//获取画笔
		var ctx=canvas.getContext("2d");

		//绘制实心矩形
		// ctx.fillRect(x,y,width,height)
		ctx.fillStyle="red"
		ctx.fillRect(100,100,200,100)
		
		//绘制空心矩形
		ctx.strokeStyle="red";
		ctx.lineWidth="2"			//边框
		ctx.strokeRect(100,100,100,100)

		ctx.fillStyle="#ff00ff";
		ctx.fillRect(100,100,100,100)

		//绘制圆形路径
		ctx.arc(300,200,100,0,2*Math.PI,false)
		ctx.fillStyle="red";
		ctx.fill()

	</script>
</body>
</html>